<template>
  <div class="main">
    <div class="header">

        <div class="item">
          <img style="width: 87px;height: 36px" :src="$assetsURL + $store.state.configInfo.logo1"/>
          <span class="h_title">
          {{ $store.state.configInfo.sitesubtitle }}
    </span>
        </div>
        <div class="item">
          <img style="width: 44px;height: 44px;" src="@/assets/phone.png"/>
          <div class="phone">
            <div>
              {{ $t('headerNav.servicePhone') }}
            </div>
            <div>
              {{ $store.state.configInfo.tel }}
            </div>
          </div>
        </div>

      <!--    搜索框-->
      <div class="item search">
        <div>
          <el-input size="medium" prefix-icon="el-icon-search" class="search_input" v-model="searchText"
                    :placeholder="$t('headerNav.search.pl')" clearable></el-input>
        </div>

        <button class="search_btn" @click="searchBtn">
          {{ $t('headerNav.search.btn') }}
        </button>
      </div>
      <!--    登录注册-->
      <el-popover
          placement="bottom-end"
          width="200"
          v-if="$store.state.token"
          trigger="hover">
        <div class="userInfo" slot="reference" v-if="$store.state.token">
          <div>
            <!--            {{ $store.state.userInfo}}-->
            <!--            <el-avatar :size="46" :src="$assetsURL + userinfo.avatar"></el-avatar>-->
            <img style="width: 46px;height: 46px;border-radius: 50%" :src="$assetsURL + userinfo.avatar" alt="">
          </div>

          <img src="@/assets/icon/userDown.png" alt="">
        </div>
        <div class="loginInfo">
          <div class="top">
            <!--            <el-avatar :size="46" :src="$assetsURL + $store.state.userInfo.avatar"></el-avatar>-->
            <img style="width: 46px;height: 46px;border-radius: 50%" :src="$assetsURL + userinfo.avatar" alt="">
            <div class="right">
              <div>{{ $store.state.userInfo.nickname }}</div>
              <div>{{ $store.state.userInfo.mobile }}</div>
            </div>
          </div>

          <div class="item" @click="goAccountSetting" style="cursor: pointer">
            <img src="@/assets/login/setting.png"/>
            {{ $t('user.l1') }}
          </div>
          <div class="item" @click="loginOut">
            <img src="@/assets/login/loginout.png"/>
            {{ $t('user.l2') }}
          </div>
        </div>
      </el-popover>
      <div class="item login" v-if="!$store.state.token" @click="goLogin">
        <div>
          {{ $t('headerNav.login') }}
        </div>
        <div></div>
        <div>{{ $t('headerNav.register') }}</div>
      </div>

    </div>
    <div class="nav_main">
      <div class="nav">
        <div class="nav_list">
          <template v-for="item in thereList">
            <template v-if="item.mid == 6">
              <el-popover
                  popper-class="cop"
                  ref="popoverRef"
                  placement="bottom-start"
                  trigger="hover">
                <div class="nav_show">
                  <div class="nav_show_item">
                    <div class="nav_show_line" :class="secondLevelSelect == class1.id? 'nav_show_line_active':''"
                         v-for="class1 in item.child" @click="navClassClick(1,class1)">
                      <span>{{ class1.name }}</span>
                      <img src="@/assets/home/go_right.png">
                    </div>
                  </div>
                  <div class="nav_show_item" v-if="secondLevelList.length > 1">
                    <div class="nav_show_line" v-for="class2 in secondLevelList"
                         :class="thereLevelSelect == class2.id? 'nav_show_line_active':''"
                         @click="navClassClick(2,class2)">
                      <span>{{ class2.name }}</span>
                      <img src="@/assets/home/go_right.png">
                    </div>
                  </div>
                  <div class="nav_show_item" v-if="thereLevelList.length > 1">
                    <div class="nav_show_line" v-for="class3 in thereLevelList" @click="navClassClick(3,class3)">
                      <span>{{ class3.name }}</span>
                      <img src="@/assets/home/go_right.png">
                    </div>
                  </div>
                </div>
                <div class="nav_item" slot="reference" @click="navClick(item)">{{ item.name }}</div>
              </el-popover>
            </template>
            <template v-else>
              <div class="nav_item" slot="reference" @click="navClick(item)">{{ item.name }}</div>
            </template>
          </template>


        </div>
        <el-dropdown @command="down">
          <el-button class="change_btn" type="primary">
            <div class="chang_view">
              <img src="@/assets/dyy.png" alt="" srcset="">
              <span>{{ language }}</span>
              <i class="el-icon-arrow-down"></i>
            </div>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh">简体中文</el-dropdown-item>
            <el-dropdown-item command="en">English</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>

    </div>
  </div>
</template>

<script>
import {getNavList, getNavListThere} from "@/api/home";
import {userLoginOut} from '@/api/user'

export default {

  name: 'HeaderNav',
  data: () => ({
    secondLevelList: [],
    secondLevelSelect: null,
    thereLevelList: [],
    thereLevelSelect: null,
    language: '简体中文',
    searchText: "",
  }),
  created() {
    getNavListThere().then(res => {
      let na = []
      if (this.$store.state.language == "zh") {
        na.push({
          id: 'home',
          name: "首页",
          child: [],
          mid: 'home'
        },)
      } else {
        na.push({
          id: 'home',
          name: "Home",
          child: [],
          mid: 'home'
        },)
      }
      na = na.concat(res.data)
      this.$store.commit("setStoreThereNavList", na)
    }).catch(err => {
    })
    if (this.$store.state.language == 'zh') {
      this.language = "简体中文"
    } else {
      this.language = "English"
    }

  },
  computed: {
    thereList() {
      return this.$store.state.storeThereNavList
    },
    userinfo() {
      return this.$store.state.userInfo
    }
  },
  methods: {
    down(some) {
      let languageType = some.toString()
      if (languageType == 'zh') {
        this.language = "简体中文"
      } else {
        this.language = "English"
      }
      this.$i18n.locale = languageType;
      this.$store.commit("setLanguage", languageType)
      sessionStorage.setItem("language", languageType)
      location.reload();

      // this.$router.push({
      //   name: '/'
      // },() => {
      //   location.reload();
      // })
    },
    goLogin() {
      this.$router.push({
        name: "login"
      }, () => {
      })
    },
    goAccountSetting() {
      this.$router.push({
        name: "accountSetting"
      }, () => {
      })
    },
    navClassClick(type, item) {
      // return;
      if (type == 1) {
        this.secondLevelList = []
        this.secondLevelSelect = item.id
        if (item.child == undefined || item.child.length == 0) {
          this.toNavClass(item)
          return
        }
        this.secondLevelList = item.child
      }
      if (type == 2) {
        this.thereLevelSelect = []
        this.thereLevelSelect = item.id
        if (item.child == undefined || item.child.length == 0) {
          this.toNavClass(item)
          return
        }
        this.thereLevelList = item.child
      }
      if (type == 3) {
        this.toNavClass(item)
      }
    },
    toNavClass(item) {
      this.$router.push({
        name: 'productList',
        query: {
          id: item.id,
          name: item.name
        }
      }, () => {
      })
      this.$refs.popoverRef[0].doClose()
    },
    navClick(item) {
      switch (item.mid) {
        case "home":
          this.$router.push({
            name: "home"
          }, () => {
          })
          break;
        case 6:
          this.$router.push({
            name: "productClass"
          }, () => {
          })
          break;
        case 8:
          this.$router.push({
            name: "serviceCenter",
            query: {
              cid: item.id,
              mid: item.mid
            }
          }, () => {
          })
          break;
        case 9:
          this.$router.push({
            name: "about",
            query: {
              cid: item.id,
              mid: item.mid
            }
          }, () => {
          })
          break;
        case 2:
          this.$router.push({
            name: "news"
          }, () => {
          })
          break;
        case 11:
          this.$router.push({
            name: "message",
            query: {
              cid: item.id,
              mid: item.mid
            }
          }, () => {
          })
          break;
        case 10:
          this.$router.push({
            name: "recruit",
            query: {
              cid: item.id,
              mid: item.mid
            }
          }, () => {
          })
          break;
        case 12:
          this.$router.push({
            name: "download",
            query: {
              cid: item.id,
              mid: item.mid
            }
          }, () => {
          })
          break;
      }
    },
    searchBtn() {
      if (this.searchText.trim() == "") {
        this.$message.warning("请输入搜索内容")
        return
      }
      this.$router.push({
        name: "searchResults",
        query: {
          value: this.searchText
        }
      }, () => {
      })
    },
    loginOut() {
      userLoginOut().then(res => {
        this.$router.push({
          name: 'home',
        }, () => {
          location.reload()
        })
        this.$store.commit('setToken', "")
        this.$store.commit('setUserInfo', "")
        localStorage.removeItem("Token")
        localStorage.removeItem("UserInfo")
      })
    }
  }
}
</script>

<style lang="less" scoped>



.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  //margin: 0 !important;
  //width: 100% !important;
}

.header {
  width: 1200px;
  display: flex;
  align-items: center;
  height: 112px;
  justify-content: space-between;
  .h_left{
    display: flex;
  }

  .item {
    display: flex;

    .h_title {
      font-size: 30px;
      font-weight: bold;
      color: #00A3E6;
      margin-left: 10px;
    }

    .phone {
      div {
        margin-left: 10px;
      }

      div:nth-child(1) {
        color: #666666;
        font-size: 14px;
        text-align: left;
      }

      div:nth-child(2) {
        color: #333333;
        font-size: 20px;
      }
    }
  }

  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 514px;
    height: 50px;
    border-radius: 25px;
    border: 2px solid #00A3E6;;

    div {
      display: flex;
      align-content: center;

      .search_icon {
        margin-left: 20px;
      }

      .search_input {
        margin-left: 10px;
        width: 400px;
        font-size: 14px;

        /deep/ input {
          //box-shadow: none;
          border: none !important;
          //padding: 0;
        }
      }
    }

    button {
      width: 84px;
      height: 42px;
      //margin-top: 2px;
      margin-right: 2px;
      background: #00A3E6;
      border-radius: 25px 25px 25px 25px;
      font-size: 16px;
      color: #fff;
      line-height: 42px;
    }
  }

  .login {
    width: 92px;
    height: 36px;
    font-size: 14px;
    color: #333333;
    border-radius: 19px;
    border: 1px solid #D8D8D8;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;

    div:nth-child(2) {
      height: 14px;
      background-color: #333333;
      width: 1px;
    }
  }

  .userInfo {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 10px;
      height: 10px;
      margin-left: 6px;
    }
  }

}

.nav_main {
  width: 100%;
  height: 50px;
  background-color: #00A3E6;
  position: relative;

  .nav {
    width: 1200px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;

    .nav_list {
      display: flex;

      .nav_item {
        width: 120px;
        height: 50px;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
      }

      .nav_item:hover {
        background-color: #0082E6;
      }
    }

    .nav_item_active {
      background-color: #0082E6;
    }

    .change_btn {
      border-radius: 30px;
      background-color: #0083B8;
      color: #FFFFFF;
      width: 110px !important;
      height: 30px !important;
      padding: 6px 10px !important;

      //justify-content: space-between;
      .chang_view {
        display: flex;
        line-height: normal;
        text-align: center;
        font-size: 13px;
        align-items: center;
        justify-content: space-evenly;
        //padding: 6px 10px;
        span {
          margin-left: 2px;
          margin-right: 4px;
        }
      }

      img {
        width: 14px;
        height: 14px;
      }

    }
  }

}

.lang {
  font-size: 13px;
}

//@media screen and (max-width: 1024px) {
//  .header{
//    width: 100%;
//    flex-wrap: wrap;
//    height: auto;
//    .h_left{
//      width: 100%;
//    }
//    .search{
//      width: 100%;
//      .search_input{
//        width: 80rem;
//      }
//    }
//  }
//
//}

</style>
